<template>
  <div>
    <el-main>
      <el-row :gutter="10">
        <el-col :span="24" class="">
          <el-card shadow="always" class="b_list_box col_scroll">
            <el-row class="work_b_box">
              <el-col class="work_b_title">
                <el-row >
                  <el-col :span="12" class="b_title">
                    <div style="margin-right: 10px">专利榜单</div>
                    <el-button type="primary" round size="small" class="t_buttpn" @click="export1">导出
                    </el-button>
                  </el-col>
                  <div class="right_text">
                    <span class="text_2" :class="rankListType == 0 ? 'text_1' : ''" @click="handleClick_1(0)">累计数据</span>
                    <span style="user-select: none">|</span>
                    <span class="text_2" :class="rankListType == 1 ? 'text_1' : ''" @click="handleClick_1(1)">上月更新</span>
                  </div>
                </el-row>
              </el-col>
              <el-col class="work_b_text_b">
                <Ranking style="width: calc(100% + 17px);" v-loading="loading" :b_tableData_3="b_tableData_3" :b_tableData_3_date="b_tableData_3_date"
                  @headerClick="headerClick"></Ranking>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
import { VUE_APP_BASE_API } from "@/config";
import Ranking from "../work/components/Ranking.vue";
import { patRank } from "@/api/configApi";

export default {
  components: { Ranking },
  data() {
    return {
      rankListType: 0,
      loading: true,
      b_tableData_3_date: "",
      b_tableData_3: [],
      companyStreetType: 0,
    };
  },
  mounted() {
    this.rankList();
  },
  methods: {
    headerClick(e) {
      this.companyStreetType = e;
      this.rankList();
    },
    rankList() {
      this.b_tableData_3 = [];
      this.loading = true;
      patRank({
        region_id: this.$store.state.user.region_id,
        status: this.rankListType + 1,
        type: this.companyStreetType,
      }).then((res) => {
        console.log(res, "asdgfayuda");
        this.loading = false;
        this.b_tableData_3 = res.list;
      });
    },
    handleClick_1(index) {
      this.rankListType = index;
      this.rankList();
    },
    export1() {
      window.open(
        `${VUE_APP_BASE_API}/v1/export/patRank?status=${this.rankListType + 1}&type=${this.companyStreetType
        }&is_export=1&region_id=${this.$store.state.user.region_id}`
      );
    },
  },
};
</script>

<style scoped lang="less">
.el-main {
  margin: 0;
}

.work_b_box {
  min-width: 602px;
  overflow: hidden;

  .work_b_title {
    padding: 20px;
    // background-color: #387DFF;
    text-align: right;

    .right_text {
      position: absolute;
      top: 4px;
      right: 0;
      font-size: 16px;

      .text_1 {
        color: #4995f4 !important;
        zoom: var(--zoom);
        cursor: pointer;
      }

      .text_2 {
        zoom: var(--zoom);
        cursor: pointer;
      }
    }

    // button {
    //   background-color: #fff;
    //   color: #387dff;
    // }

    .b_title {
      font-size: 22px;
      font-weight: bolder;
      // color: #fff;
      text-align: left;
      display: flex;
      align-items: center;

      .el-dropdown-link {
        color: #2a65fb !important;
        background-color: #ebf2fe !important;
        display: inline-block;
        padding: 8px 10px;
        border-radius: 30px;
        font-size: 14px;
        font-weight: initial !important;

        .el-popper {
          position: absolute;
          left: 0;
          top: 24px;
          width: 100px;
          z-index: 999999;
          font-size: 14px;
          line-height: 24px;
          background-color: #0e1941;
          color: #4995f4;
          cursor: pointer;
          transform: scale(0);
          transform-origin: 0 0;
          transition: all 0.2s;

          .el-popper-item {
            padding: 5px;
          }

          .el-popper-item:hover {
            color: #68d8fe !important;
            background-color: #28293f !important;
          }

          .el-popper-item-active {
            color: #68d8fe !important;
            background-color: #28293f !important;
          }
        }
      }

      .el-dropdown-link:hover {
        .el-popper {
          transform: scale(1);
        }
      }
    }
  }
}
@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
